<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-16 15:19:36
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-18 14:24:21
-->
<template>
  <div class="app-container">
    <el-page-header content="详情页面" @back="goBack" />
    <div class="row">
      <div class="rowTitle">文章标题：</div>
      <div class="rowContent">{{ list.title }}</div>
    </div>
    <div class="row">
      <div class="rowTitle">文章分类：</div>
      <div class="rowContent">{{ list.article_type_id | checkType }}</div>
    </div>
    <div class="row">
      <div class="rowTitle">上传用户：</div>
      <div class="rowContent">{{ list.nicheng == '' ? '暂无' : list.nicheng }}</div>
    </div>
    <div class="row">
      <div class="ground">
        <div class="rowTitle">点赞：</div>
        <div class="rowContent">{{ list.likenum }}</div>
      </div>
      <div class="ground">
        <div class="rowTitle">转发：</div>
        <div class="rowContent">{{ list.transpondnum }}</div>
      </div>
      <div class="ground">
        <div class="rowTitle">评论：</div>
        <div class="rowContent">{{ list.commentnum }}</div>
      </div>
      <div class="ground">
        <div class="rowTitle">不喜欢：</div>
        <div class="rowContent">{{ list.dislikenum }}</div>
      </div>
      <div class="ground">
        <div class="rowTitle">阅读量：</div>
        <div class="rowContent">{{ list.readnum }}</div>
      </div>
    </div>
    <div class="row">
      <div class="rowTitle">上传时间：</div>
      <div class="rowContent">{{ list.update_time * 1000 | get_YMDHMS }}</div>
    </div>
    <div class="row">
      <div class="rowTitle">状态：</div>
      <div class="rowContent">{{ list.school_is_check | checkState }}</div>
    </div>
    <div class="row">
      <div class="rowTitle">内容：</div>
      <div class="rowContent">
        <!-- <vue-ueditor-wrap v-model="list.content" :config="ueConfig" @ready="ready" /> -->
        <el-card class="box-card">
          <div v-html="list.content" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { get_ArticleType, get_ArticleList } from '@/api/trembleSchool/article'
import { formatDate } from '@/utils/getTime'
// import VueUeditorWrap from 'vue-ueditor-wrap'
var That = null
export default {
    // components: {
    //     VueUeditorWrap
    // },
    filters: {
        checkType(val) {
            if (!val) return ''
            var type = That.typeOptions.find((item, index) => {
                return item.article_type_id == val
            })
            var name = type && type.article_name || '无'
            return name
        },
        checkState(val) {
            if (!val) return ''
            var type = That.stastOptions.find((item, index) => {
                return item.value == val
            })
            return type.label
        },
        get_YMDHMS: function(value) {
            if (!value) return ''
            value = formatDate(value)
            return value
        }
    },
    data() {
        return {
            list: {
                title: '',
                article_type_id: '',
                nicheng: '',
                likenum: '',
                dislikenum: '',
                transpondnum: '',
                commentnum: '',
                readnum: '',
                update_time: '',
                is_check: '',
                content: ''
            },
            typeOptions: [],
            stastOptions: [{
                value: '1',
                label: '未审核'
            }, {
                value: '2',
                label: '通过'
            }, {
                value: '3',
                label: '违规'
            }, {
                value: '4',
                label: '被举报'
            }],
            ueConfig: {
                toolbars: [
                    [
                        'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', '|', 'insertimage',
                        'insertvideo', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'
                    ]
                ],
                initialFrameHeight: 420,
                initialFrameWidth: '100%',
                UEDITOR_HOME_URL: '/UEditor/'
            }
        }
    },
    watch: {
        $route() {
            this.article_id = this.$route.query.id
            // 初始化表格
            this.get_type()

            this.get_ListData()
        }
    },
    created() {
        That = this
        this.article_id = this.$route.query.id
        // 初始化表格
        this.get_type()

        this.get_ListData()
    },
    methods: {
        // 文章分类
        async get_type() {
            var queryData = {}
            var data = await get_ArticleType(queryData)
            console.log('文章分类：', data)
            this.typeOptions = data.data
        },
        // 获取列表数据
        async get_ListData() {
            var queryData = {
                article_id: this.article_id
            }
            var data = await get_ArticleList(queryData)
            console.log('文章详情：', data)
            if (data.code == 200) {
                this.list = data.data.data[0]
                this.total = data.data.total
            }
        },
        ready(editorInstance) {
            editorInstance.setDisabled()
        },
        goBack() {
            this.$router.go(-1)
            this.$store.dispatch('tagsView/delView', this.$route)
        }
    }
}
</script>

<style scoped lang='scss'>
.row{
    width: 100%;
    margin: 40px 0;
    margin-left: 20px;
    display: flex;

    .rowTitle {
        width: 100px;
        text-align: center;
        font-weight: 600;
        font-size: 15px;
        color: rgb(83, 83, 83);
    }

    .rowContent {
        font-size: 15px;
        color: rgb(148, 147, 147);
        width: 90%;

        .box-card {
            min-height: 400px;
        }
    }

    .ground {
        display: flex;
        width: 200px;
    }
}
</style>
